<script setup lang="ts">
  const emits = defineEmits([
    'get-more', // 获取更多
  ])

  const on = () => {
    emits('get-more')
  }
</script>

<template>
  <!-- 列表容器 -->
  <!-- prettier-ignore -->
  <div 
    class="feeds-container"
    :infinite-scroll-immediate="false"
    :infinite-scroll-distance="300"
    v-infinite-scroll="on">
    <slot></slot>
  </div>
</template>

<style scoped lang="less">
  @import '@/assets/styles/base.less';

  .feeds-container {
    width: 100%;
    display: grid;

    // 网格间距
    @width-4: 1400px;
    @width-3: 1200px;
    @width-2: @phone-width;

    .gap(@width, @col) {
      column-gap: @width;
      row-gap: calc(@width / 2);
      grid-template-columns: repeat(@col, 1fr);
    }

    // 根据不同尺寸修改Feeds容器的网格间距
    @media (min-width: @width-4) {
      .gap(var(--gap-width-5), 5);
    }

    @media (min-width: @width-3) and (max-width: @width-4) {
      .gap(var(--gap-width-4), 4);
    }

    @media (min-width: @width-2) and (max-width: @width-3) {
      .gap(var(--gap-width-3), 3);
    }

    @media (max-width: @width-2) {
      .gap(var(--gap-width-2), 2);
    }
  }
</style>
